<template>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="反馈建议">
        <template #label>
          <view style="margin-top: 10px">
            <u--textarea
              v-model="form.message"
              placeholder="请描述反馈建议"
              autoHeight
              border="none"
            ></u--textarea>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="请上传附件">
        <template #label>
          <view style="margin-top: 10px">
            <u-upload
              width="36"
              height="36"
              :fileList="fileList"
              @afterRead="afterRead"
              @delete="deleteFn"
              uploadIcon="plus"
              name="image"
              :maxCount="Max_FILE"
            ></u-upload>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="box">
    <u-cell-group :border="false">
      <u-cell :border="false" title="联系人">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.contact"
              placeholder="请输入联系人"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
      <u-cell :border="false" title="联系电话">
        <template #value>
          <view style="flex: 2">
            <up-input
              inputAlign="right"
              v-model="form.phone"
              placeholder="请输入联系电话"
              border="none"
            ></up-input>
          </view>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="btn">
    <up-button
      type="primary"
      shape="circle"
      text="保存"
      @click="handleSubmit"
    ></up-button>
  </view>
</template>

<script setup>
import { reactive } from "vue";
import { isMobile } from "@/utils/reg";
import { postSysFeedback } from "@/api/index";
import { useCheckForm } from "@/hooks/useCheckForm";
import { useUploadFile, Max_FILE } from "@/hooks/useUpload";
const { fileList, afterRead, deleteFn } = useUploadFile();
import { message } from "@/hooks/useToast";
const form = reactive({
  message: "",
  contact: "",
  phone: "",
});
const { validate } = useCheckForm(
  {
    message: [{ required: true, message: "请输入反馈建议" }],
    phone: [
      {
        validator: (rule, value) => {
          if (!value) return true;
          return isMobile(value);
        },
        message: "手机号格式错误",
      },
    ],
  },
  form
);
const handleSubmit = async () => {
  try {
    const res = await validate();
    if (!res) return;
    let arr = [];
    if (fileList.value.length > 0) {
      arr = fileList.value.map((btn) => {
        return {
          feedbackImage: btn.url,
        };
      });
    }
    await postSysFeedback({
      requestSysFeedbackDTO: {
        contacts: form.contact,
        telephone: form.telephone,
        remark: form.message,
      },
      requestSysFeedbackImageDTOList: arr,
    });
    setTimeout(() => {
      message("反馈成功");
      uni.navigateBack();
    }, 1000);
  } catch (e) {
    console.log("error", e);
  }
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.box {
  background-color: #fff;
  margin-bottom: 10px;
}

.u-textarea {
  padding: 0 !important;
}

.btn {
  margin: 23px 16px 0;
}
</style>
